<template>
	<div v-loading="isLoading" class="panel-property">
		<!-- <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      /> -->
		<!-- <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="tooltipHasLabel"
          :config="config"
          type="echart"
          :echart-vars="{ name: '', value: '' }"
          :widget-instance-id="widgetInstanceId"
        />
        <BaseOption
          :form="form"
          option="componentStyle"
          @change="initTitleColor"
        />
        
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
            />
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
        </OptionCollapse>
        <BaseOption
          :form="form"
          option="echart"
          :echart-conf="getEchartConf()"
        />

        <Teleport v-if="childrenMounted" :to="`#legend_color_after_${widgetInstanceId}`">
          <EcFormItem
            :form="form"
            option="echart.legend.textStyle.rich.b.color"
            :label="$demoi18n('panel-property.valueColor')"
            type="color"
          />
        </Teleport>

      </el-form> -->

		<el-form ref="form" :model="form" label-width="100px">
			<el-form-item label="背景颜色">
				<el-color-picker v-model="form.bgColor" show-alpha />
			</el-form-item>
			<el-form-item label="标题颜色">
				<el-color-picker v-model="form.titleColor" show-alpha />
			</el-form-item>
			<el-form-item label="标题大小">
				<el-input-number v-model="form.titleFontSize" size="default" :min="1" :max="35"></el-input-number>
			</el-form-item>
			<el-form-item label="内容大小">
				<el-input-number v-model="form.contentFontSize" size="default" :min="1" :max="35"></el-input-number>
			</el-form-item>
			<el-form-item label="内容颜色">
				<el-color-picker v-model="form.contentColor" show-alpha />
			</el-form-item>
			<el-form-item label="组件宽度">
				<el-input-number v-model="form.width" size="default" :min="0" :max="800"></el-input-number>
			</el-form-item>
			<el-form-item label="组件高度">
				<el-input-number v-model="form.height" size="default" :min="0" :max="800"></el-input-number>
			</el-form-item>
			<el-form-item label="单位字体大小">
				<el-input-number v-model="form.unitSize" size="default" :min="1" :max="35"></el-input-number>
			</el-form-item>
			<el-form-item label="单位字体颜色">
				<el-color-picker v-model="form.unitColor" show-alpha />
			</el-form-item>
		</el-form>



		<!-- </div> -->
		<!-- <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" /> -->
	</div>
</template>
<script>
	import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
	import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
	import panelPropertyBase from '@/mixin/panel-property-base.js';
	import {
		mergeObj
	} from '@/utils/util.js';
	import BaseOption from '../../common/base-option/base-option.vue';
	// import colorGroup from './colorGroup.js';
	import config from './config.js';
	import {
		nextTick
	} from 'vue';
	import EcFormItem from '@/components/common/echart/form-item.vue';

	export default {
		name: 'PanelProperty',
		components: {
			BaseOption,
			OptionCollapse,
			PanelLabelOverflowTooltip,
			EcFormItem,
		},
		mixins: [panelPropertyBase],
		props: ['config', 'widgetInstanceId', 'widget'],
		data() {
			return {
				activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
				// colorGroup: colorGroup,
				tip: this.$demoi18n('panelProperty.basicPie.totalTip'),
				isLoading: false,
				form: {
					bgColor: '#FFFFFF',
					  titleFontSize: 18,
					  titleColor: '#DCDFE6',
					  contentFontSize: 12,
					  contentColor: '#DCDFE6',
					  rowHeight: 35,
					  width: 300,
					  height: 500,
					  unitSize: 11,
					  unitColor: '#C5C5C5',
					  titleText: '望云',
					  itemHight: 88,

				},
				rules: {},
				dfCssStyleAttrs: {},
				extraColorConfig: {
					isCustom: true,
					field: 's',
				},
				childrenMounted: false,
			};
		},
		created() {
			if (this.config) {
				this.form = JSON.parse(JSON.stringify(this.config.config.property));
				this.dfCssStyleAttrs = this.initDfCssStyleAttrs();
			}

			// 合并config.js属性，防止新增属性缺失而报错
			const _form = JSON.parse(JSON.stringify(config.config.property));
			this.form = mergeObj(_form, this.form);
		},
		mounted() {
			nextTick(() => {
				this.childrenMounted = true;
			});
		},
		methods: {
			getPanelLabelOverflowTooltip() {
				return {
					parentComp: this,
				};
			},
			getEchartConf() {
				return {
					_componentName: 'basic-pie',
					legend: {
						orient: 'vertical',
						displayType: 'name',
						icon: 'rect',
					},
					dfVals: this.getEchartDfVals({
						'echart.legend.show': 'legend',
					}),
				};
			},
		},
	};
</script>

<style lang="less" scoped>
	@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
	.panel-property {
		.content {
			.prop-form {
				padding: 0 10px;

				:deep(.el-form-item) {
					margin-bottom: 0;
				}

				.input-number {
					width: 80px;

					:deep(.el-input-number__decrease) {
						width: 19px;
						background-color: #fff;
					}

					:deep(.el-input-number__increase) {
						width: 19px;
						background-color: #fff;
					}

					:deep(.el-input__inner) {
						padding-left: 19px;
						padding-right: 19px;
					}
				}

				.input-number-left {
					margin-right: 25px;
				}

				.color-radio-group {
					background-color: #eeeeee;

					:deep(.el-radio-button__inner) {
						display: inline-block;
						padding: 2px 2px;
						border: 0;
						border-radius: 0;
						height: 24px;
						margin: 2px 2px;
						background: #eeeeee;
					}

					:deep(.is-active) {
						.el-radio-button__inner {
							background-color: #409eff;
						}
					}
				}
			}
		}
	}
</style>